<template>

  <el-table :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="medium">
    <el-table-column :show-overflow-tooltip="true" header-align="center" label="营销要素编号"
      prop="sellerFactorNumber" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="产品通用名"
      prop="productInfoDetail.productPopularName" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="商品名"
      prop="productInfoDetail.productName" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="包装规格"
      prop="productInfoDetail.packSpecs" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="生产厂家"
      prop="productInfoDetail.producer" />

    <el-table-column :show-overflow-tooltip="true" align="center" label="交易价(元)" prop="tradePrice" />

    <el-table-column :show-overflow-tooltip="true" align="center" label="负责营销职员" prop="headName" />

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建时间" prop="createdAt">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="签约状态" prop="terminalStatus">
      <template #default="{row}">
        {{ getLabel('seller_factor_status', row.SellerFactorStatus) }}
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      tableData: [],
    });

    const handlList = (id) => {
      api.shangPin.SHANGPIN_DETAILS_LIST(id).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
        }
      });
    };

    onMounted((_) => {
      if (route.query.id) {
        handlList(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlList,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>